<!-- 敏感行为警告页面 -->
<template>
  <div class="alarming">
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="敏感记录" name="1">
          <el-table :data="recordSensitive" stripe style="width: 100%"
            :header-cell-style="{background:'#fff'}">
            <el-table-column prop="operator" label="操作员工">
            </el-table-column>
            <el-table-column prop="operateTarget" label="操作对象">
            </el-table-column>
            <el-table-column prop="sensitiveAct" label="敏感行为">
            </el-table-column>
            <el-table-column prop="updateTime" label="操作时间">
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="recordPageTotal"
            :page.sync="recordPageConfig.pageNum"
            :limit.sync="recordPageConfig.pageSize"
            @pagination="getSensiveRecordList()"
          />
        </el-tab-pane>
        <el-tab-pane label="敏感行为管理" name="2">
          <el-button
            type="primary"
            class="add-btn"
            icon="el-icon-plus"
            @click="addSensitiveManagementRule"
          >添加敏感行为规则</el-button
          >
          <el-table :data="tabData" stripe style="width: 100%"
            :header-cell-style="{background:'#fff'}">
            <el-table-column prop="actName" label="敏感操作">
            </el-table-column>
            <el-table-column label="是否记录">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.enableFlag" :active-value="1" :inactive-value="2" @change="handleStatusChange(scope.row)"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="排序" align="center" prop="orderNum">
              <template slot-scope="{ row }">
                <el-input
                  class="bfc-d"
                  style="width: 100px;"
                  v-if="row.isEdit"
                  v-model="row.orderNum"
                  placeholder="请输入"
                ></el-input>
                <span v-else>
                    {{ row.orderNum }}
                </span>

                <i
                  v-if="!row.isEdit"
                  class="row-icon el-icon-edit"
                  @click="$set(row, 'isEdit', true)"
                ></i>
                <i
                  v-else
                  class="row-icon el-icon-circle-check"
                  @click="updateOrderNum(row)"
                ></i>
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center" prop="operId">
              <template slot-scope="scope">
                <el-button type="text" @click="updateSensitiveManagementDialog(scope.row)"
                >更新敏感行为</el-button
                >
              </template>
            </el-table-column>

          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="query.pageNum"
            :limit.sync="query.pageSize"
            @pagination="getSensitiveManagementList()"
          />

          <!-- 添加敏感词 -->
          <el-dialog
            :title="isAdd==1?'添加敏感行为规则':'修改敏感行为规则'"
            :visible.sync="open"
            width="600px"
            append-to-body
          >

            <el-form
              ref="addForm"
              :model="addForm"
              :rules="rules"
              label-width="130px"
            >

              <el-form-item label="id">
                <el-tag>{{formid}}</el-tag>
              </el-form-item>

              <el-form-item label="敏感行为规则名称" prop="actName">
                <el-input v-model="addForm.actName" placeholder="例：card 或者 redpacket 或者 拉黑/删除好友" />
              </el-form-item>

              <el-form-item label="是否开启敏感行为记录">
                <el-switch
                  v-model="enableFlag"
                  :active-value="1"
                  :inactive-value="0"
                ></el-switch>
              </el-form-item>

              <el-form-item label="顺序">
                <el-input v-model="orderNum"></el-input>
              </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" v-if="isAdd==1" @click="addSensitiveManagementRuleForm">确 定</el-button>
              <el-button type="primary" v-else="isAdd==0" @click="updateSensitiveManagementRuleForm">确 定</el-button>
              <el-button @click="open = false">取 消</el-button>
            </div>
          </el-dialog>

        </el-tab-pane>
      </el-tabs>
  </div>
</template>
<script>
import * as sensitiveApis from '@/api/conversation/security'
import ElInput from "../../../../node_modules/element-ui/packages/input/src/input.vue";
import ElFormItem from "../../../../node_modules/element-ui/packages/form/src/form-item.vue";
import ElTag from "../../../../node_modules/element-ui/packages/tag/src/tag.vue";
export default {
  components: {
    ElTag,
    ElFormItem,
    ElInput},
  data() {
    return {
      activeName: '1',
      recordSensitive: [],
      tabData: [],
      total: 0,
      query: {
        pageNum: 1,
        pageSize: 10
      },
      recordPageTotal: 0,
      recordPageConfig: {
        pageNum: 1,
        pageSize: 10
      },

      addForm: {
        actName: '', // 行为规则名称
      },
      enableFlag: 0,
      orderNum: 0,
      formid:0,
      open: false, // 是否显示添加敏感行为规则弹框
      rules: {
        actName: [
          {required: true, message: '敏感行为规则名称不能为空', trigger: 'blur'},
        ]
      },
      isAdd: 1 //默认添加 0非1是
    }
  },
  mounted() {
    this.getSensiveRecordList()
    this.getSensitiveManagementList()
  },
  methods: {
    getSensiveRecordList() {
      sensitiveApis.getSensitiveRecord(this.recordPageConfig).then(res => {
        if (res.code === 200) {
          this.recordSensitive = res.rows
          this.recordPageTotal = Number(res.total)
        }
      })
    },
    getSensitiveManagementList() {
      sensitiveApis.getSensitiveManagement(this.query).then(res => {
        if (res.code === 200) {
          this.tabData = res.rows
          this.total = Number(res.total)
        }
      })
    },
    resetForm() {
      this.addForm={
        actName: ''
      };
      this.enableFlag=0;
      this.formid=null;
      this.orderNum=0;
    }
    ,
    addSensitiveManagementRule(){
       this.isAdd=1;
       this.resetForm();
       this.open=true;

    }
    ,
    addSensitiveManagementRuleForm(){
      this.$refs.addForm.validate((valid)=>{
        if(valid){
          let data={
            actName:this.addForm.actName,
            enableFlag:this.enableFlag,
            orderNum:this.orderNum,
          };

          sensitiveApis.addSensitiveManagement(data).then((res)=>{
            if (res.code === 200) {
              this.open = false;
              this.getSensitiveManagementList();
            }
          }).catch();
        }
      });

    },
    updateOrderNum(row){
      sensitiveApis.updateSensitiveManagement(row).then((res)=>{
        this.msgSuccess('操作成功')
        this.$set(row, 'isEdit', false)
      }).catch(err=>{
      });
    },

    updateSensitiveManagementDialog(row){
      this.isAdd=0;
      this.addForm.actName=row.actName;
      this.enableFlag=row.enableFlag;
      this.orderNum=row.orderNum;
      this.formid=row.id;


      this.open=true;
    },

    updateSensitiveManagementRuleForm(){
      let updaterow={
        id: this.formid,
        orderNum: this.orderNum,
        actName:this.addForm.actName,
        enableFlag:this.enableFlag,
      };
      sensitiveApis.updateSensitiveManagement(updaterow).then((res)=>{
        this.msgSuccess('操作成功')
        this.open=false;
        this.getSensitiveManagementList();
      }).catch(err=>{
      });
    }
    ,
    handleStatusChange(e) {
//      console.log(e)
    },
    handleClick(tab, event) {
//      console.log(tab, event)
    }
  }
}
</script>
